import React from 'react'
//导入状态文件中的动作方法
import { add, dec, asyncaddnum, asyncdecnum } from '../../store/modules/counter'
import { addHits, asyncaddHitCount } from '../../store/modules/hits'

//导入钩子函数
import { useSelector, useDispatch } from 'react-redux'

export default function Redux() {
    //此时读取的状态数据就是仓库对象中reducer配置属性的值
    // let { counter: { num }, hitcount: { hits } } = store.getState()

    //useSelector的实际参数要求传入一个函数，并且定义一个形式参数，里面的值表示就是仓库中的所有状态数据
    //useSelector钩子功能：用于读取仓库中的所有状态数据
    let { counter: { num }, hitcount: { hits } } = useSelector(state => state);

    //useDispatch这个钩子返回的是dispatch函数
    let dispatch = useDispatch()

    //声明事件函数
    let addCount = () => {
        dispatch(add(1));
    }
    //高阶函数
    let decCount = n => {
        return () => {
            //动作方法中的实际参数就是载荷数据
            dispatch(dec(n));
        }
    }
    let asyncaddCount = (n) => {
        //如果dispatch参数接收的是一个函数的话，则这个动作函数是一个异步方法
        dispatch(asyncaddnum(n));
    }
    let asyncdecCount = (n) => {
        //如果dispatch参数接收的是一个函数的话，则这个动作函数是一个异步方法
        dispatch(asyncdecnum(n));
    }
    let addhit = n => {
        dispatch(addHits(n));
    }
    let asyncaddhit = n => {
        dispatch(asyncaddHitCount(n));
    }
    return (
        <div>
            <h3>读取仓库中的计数器状态数据:{num}</h3>
            <button onClick={() => addCount(1)}>同步+1</button>
            <button onClick={decCount(1)}>同步-1</button>
            <hr />
            <button onClick={() => asyncaddCount(1)}>异步+1</button>
            <button onClick={() => asyncdecCount(1)}>异步-1</button>
            <hr />
            <h3>读取仓库中的点击量状态数据:{hits}</h3>
            <button onClick={() => addhit(10)}>同步+10</button>
            <button onClick={() => asyncaddhit(20)}>异步+20</button>
        </div>
    )
}
